<template>
  <view class="content">
    <button class="shengji" @click="upgrade">
      升级
    </button>
    <view class="btn-box">
      <view class="daqu" v-for="item in region" :key="item.id">
        <button class="btn_tit" :class="item.active ? 'active' : ''" @click="change_daqu(item.id)">
          {{item.name}}
        </button>
      </view>
    </view>
    <view class="shop">
      <button class="btn" @click="change_city(ite.mendian)" v-for="ite in mendian_list.mendian_list"
        :key="ite.mendian">{{ite.name}}</button>
    </view>

  </view>
</template>

<script>
  import checkVersion from "@/pages/lq-upgrade/checkVersion.js";
  export default {
    data() {
      return {
        is_city: false,
        region: [],
        shop: [],
        mendian_list: []
      }
    },
    onLoad() {
      this.get_city_shop()
    },
    methods: {
       async upgrade() {
            let result = await this.$http({
              url: "Bigscreen/check_version",
              method: "POST",
            });
            if (result.errcode == 0) {
              let name = result.content.versionName; //新版本名称
              let code = result.content.versionCode; //新版本号（数字）
              let content = result.content.content; //更新内容
              let url = result.content.versionUrl; //app下载链接
              let forceUpdate = result.content.force; //是否强制更新
              checkVersion({
                name, //最新版本名称
                code, //最新版本号
                content, //更新内容
                url, //下载链接
                forceUpdate, //是否强制升级
              });
            }
          },
      async get_city_shop() {
        let result = await this.$http({
          url: 'Bigscreen/mendian_daqu',
          method: 'POST',
        })
        this.region = result.data.map((item, index) => {
          item.active = index === 0; // 设置第一个元素的 active 为 true，其余为 false
          return item;
        });
        this.mendian_list = this.region[0]

      },
      async change_city(item) {

        uni.navigateTo({
          url: `/pages/index/room?id=${item}`
        })
      },
      change_daqu(id) {

        this.region.forEach((item) => {

          item.active = false
          if (item.id == id) {
            item.active = true
            this.mendian_list = item
            console.log(this.mendian_list);
          }
        })
      }
    }
  }
</script>

<style lang="less">
  page {
    background-color: #0E202C;
  }

  .content {
    position: relative;

    .shengji {
      position: absolute;
      right: 140px;
      top: -80px;
      width: 80px;
      height: 35px;
      font-size: 12px;
      background-color: #24a9ff;
      color: #fff;
      text-align: center;
      line-height: 35px;
    }

    .shop {
      display: flex;
      flex-wrap: wrap;

      .btn:hover {
        background-color: #bdf;
        color: #173549;
      }

      .btn {

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 160px;
        height: 40px;
        margin: 20px;
        text-align: center;
        line-height: 40px;
        background-color: #173549;
        border: 1px solid #eee;
        color: #fff;
      }
    }

    .btn-box {
      margin-top: 100px;
      display: flex;
      flex-wrap: wrap;


      .daqu {
        flex: 1;
        height: 40px;
        margin: 20px 40px;
        text-align: center;
        line-height: 40px;
        // background-color: #2b5774;
        border-radius: 10px;
        color: #fff;

        .daqu_item {
          font-weight: bold;
          text-align: center;
          font-size: 22px;
        }


        .btn_tit {

          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 160px;
          height: 40px;
          margin: 20px auto;
          text-align: center;
          line-height: 40px;
          background-color: #1a2832;

          border: 1px solid #eee;
          color: #fff;
        }

        .active {
          background-color: #1d6da1;
        }
      }

    }
  }
</style>